<template>
  <div class="profile_page">
    <head-top head-title="我的"></head-top>
    <!-- go-back='true' -->
    <section>
      <section class="profile-number">
        <div class="profile-link">
          <img :src="myUse.avatar" class="privateImage" v-if="myUse" />
          <span class="privateImage" v-else>
            <svg class="privateImage-svg">
              <use
                xmlns:xlink="http://www.w3.org/1999/xlink"
                xlink:href="#avatar-default"
              ></use>
            </svg>
          </span>
          <div class="user-info">
            <p>
              {{ myUse ? myUse.truename || myUse.nickname : ""}}
              <span class="cordno" v-if="myUse && myUse.card_no">工号：{{ myUse.card_no }}</span>
            </p>

            <p>
              <span class="user-icon">
                <svg class="icon-mobile" fill="#fff">
                  <use
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    xlink:href="#mobile"
                  ></use>
                </svg>
              </span>
              <span class="icon-mobile-number">{{
                this.myUse.mobile || "暂无绑定手机号"
              }}</span>
              <span class="cordno" v-if="myUse.money">赠送余额：{{ myUse.money }}</span>
            </p>
          </div>
          <span class="arrow"> </span>
        </div>
      </section>
      <section class="profile-1reTe">
        <!-- 我的订单 -->
        <router-link to="/order" class="myorder">
          <aside>
            <svg fill="#4aa5f0">
              <use
                xmlns:xlink="http://www.w3.org/1999/xlink"
                xlink:href="#order"
              ></use>
            </svg>
          </aside>
          <div class="myorder-div">
            <span>我的订单</span>
            <span class="myorder-divsvg">
              <svg fill="#bbb">
                <use
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  xlink:href="#arrow-right"
                ></use>
              </svg>
            </span>
          </div>
        </router-link>
        <router-link to="/profile/info/setusername" class="myorder">
          <aside>
            <svg fill="#4aa5f0">
              <use
                xmlns:xlink="http://www.w3.org/1999/xlink"
                xlink:href="#order"
              ></use>
            </svg>
          </aside>
          <div class="myorder-div">
            <span>修改信息</span>
            <span class="myorder-divsvg">
              <svg fill="#bbb">
                <use
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  xlink:href="#arrow-right"
                ></use>
              </svg>
            </span>
          </div>
        </router-link>
        <div class="myorder" v-if="showShop" @click="gotoBasiness">
          <aside>
            <svg fill="#4aa5f0">
              <use
                xmlns:xlink="http://www.w3.org/1999/xlink"
                xlink:href="#order"
              ></use>
            </svg>
          </aside>
          <div class="myorder-div">
            <span>我的店铺</span>
            <span class="myorder-divsvg">
              <svg fill="#bbb">
                <use
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  xlink:href="#arrow-right"
                ></use>
              </svg>
            </span>
          </div>
        </div>
      </section>
    </section>
    <!-- <foot-guide></foot-guide> -->
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import headTop from "src/components/header/head";
import footGuide from "src/components/footer/footGuide";
import { mapState, mapMutations } from "vuex";
import { imgBaseUrl } from "src/config/env";
import { getImgPath } from "src/components/common/mixin";
import { getUseInfo } from "../../service/getData.js";

export default {
  data() {
    return {
      username: "用户名", //用户名
      resetname: "",
      mobile: "暂无绑定手机号", //电话号码
      avatar: "", //头像地址
      imgBaseUrl,
      myUse: {},
      showShop: false,
    };
  },
  mounted() {
    this.initData();
    console.log(window.location.href);
  },
  mixins: [getImgPath],
  components: {
    headTop,
    footGuide,
  },

  computed: {
    ...mapState(["userInfo"]),
    //后台会返回两种头像地址格式，分别处理
    imgpath: function () {
      let path;
      if (this.avatar.indexOf("/") !== -1) {
        path = imgBaseUrl + this.avatar;
      } else {
        path = this.getImgPath(this.avatar);
      }
      this.SAVE_AVANDER(path);
      return path;
    },
  },
  methods: {
    ...mapMutations(["SAVE_AVANDER"]),
    gotoBasiness() {
      window.open(
        `http://www.zzzcdz.cn/elm/store.html#/store.html?uid=${this.$store.state.uid}&infoid=${this.myUse.infoid}#/`
      );
    },
    initData() {
      getUseInfo().then((res) => {
        this.$store.state.myUse = res.data;
        this.$store.state.userInfo = res.data;
        this.myUse = res.data;
        this.showShop = this.myUse.role == 1 ? true : false;
      });
      // if (this.userInfo && this.userInfo.user_id) {
      //     this.avatar = this.userInfo.avatar;
      //     this.username = this.userInfo.username;
      //     this.mobile = this.userInfo.mobile || '暂无绑定手机号';
      // }else{
      //     this.username = '点击登录';
      //     this.mobile = '暂无绑定手机号';
      // }
    },
  },
  // watch: {
  //   userInfo: function (value) {
  //     this.initData();
  //   },
  // },
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

.profile_page {
  p,
  span {
    font-family: Helvetica Neue, Tahoma, Arial;
  }
}
.profile-number {
  padding-top: 1.95rem;
  .profile-link {
    display: block;
    display: flex;
    box-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: $blue;
    padding: 0.666667rem 0.6rem;
    .privateImage {
      display: inline-block;
      @include wh(2.5rem, 2.5rem);
      border-radius: 50%;
      vertical-align: middle;
      .privateImage-svg {
        background: $fc;
        border-radius: 50%;
        @include wh(2.5rem, 2.5rem);
      }
    }
    .user-info {
      margin-left: 0.48rem;
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      .cordno {
        display: inline-block;
        margin-left: 0.48rem;
        @include sc(0.57333rem, $fc);
      }
      p {
        font-weight: 700;
        @include sc(0.8rem, $fc);
        .user-icon {
          @include wh(0.5rem, 0.75rem);
          display: inline-block;
          vertical-align: middle;
          line-height: 0.75rem;
          .icon-mobile {
            @include wh(100%, 100%);
          }
        }
        .icon-mobile-number {
          display: inline-block;
          @include sc(0.57333rem, $fc);
        }
      }
    }
    .arrow {
      @include wh(0.46667rem, 0.98rem);
      display: inline-block;
      svg {
        @include wh(100%, 100%);
      }
    }
  }
}
.info-data {
  width: 100%;
  background: $fc;
  box-sizing: border-box;
  ul {
    .info-data-link {
      float: left;
      width: 33.33%;
      display: inline-block;
      border-right: 1px solid #f1f1f1;
      span {
        display: block;
        width: 100%;
        text-align: center;
      }
      .info-data-top {
        @include sc(0.55rem, #333);
        padding: 0.853333rem 0 0.453333rem;
        b {
          display: inline-block;
          @include sc(1.2rem, #f90);
          font-weight: 700;
          line-height: 1rem;
          font-family: Helvetica Neue, Tahoma;
        }
      }
      .info-data-bottom {
        @include sc(0.57333rem, #666);
        font-weight: 400;
        padding-bottom: 0.453333rem;
      }
    }
    .info-data-link:nth-of-type(2) {
      .info-data-top {
        b {
          color: #ff5f3e;
        }
      }
    }
    .info-data-link:nth-of-type(3) {
      border: 0;
      .info-data-top {
        b {
          color: #6ac20b;
        }
      }
    }
  }
}
.profile-1reTe {
  margin-top: 0.4rem;
  background: $fc;
  .myorder {
    padding-left: 1.6rem;
    display: flex;
    align-items: center;
    aside {
      @include wh(0.7rem, 0.7rem);
      margin-left: -0.866667rem;
      margin-right: 0.266667rem;
      display: flex;
      align-items: center;
      svg {
        @include wh(100%, 100%);
      }
    }
    .myorder-div {
      width: 100%;
      border-bottom: 1px solid #f1f1f1;
      padding: 0.433333rem 0.266667rem 0.433333rem 0;
      @include sc(0.7rem, #333);
      display: flex;
      justify-content: space-between;
      span {
        display: block;
      }
      .myorder-divsvg {
        @include wh(0.46667rem, 0.466667rem);
        svg {
          @include wh(100%, 100%);
        }
      }
    }
  }
  .myorder:nth-of-type(3) .myorder-div {
    border: 0;
  }
}
.router-slid-enter-active,
.router-slid-leave-active {
  transition: all 0.4s;
}
.router-slid-enter,
.router-slid-leave-active {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
}
</style>
